<template>
    <div class="day">
        <!-- <a-checkbox
            :checked="day.checked"
            class="checkbox"
            @change="onCheckSingleChange(dayIndex)"
        ></a-checkbox> -->
        <div class="date">{{ day.day }}</div>
        <div class="timeline">
            <div class="time">
                <div v-for="hour in 24" :key="hour" class="hour">
                    <span>{{ hour - 1 }}</span>
                    <i class="line"></i>
                </div>
            </div>
            <div ref="sliderRef" @mousedown="onMouseDown" class="slider">
                <Track
                    v-for="(timeline, i) in day.timelines"
                    :key="i"
                    :activeIndex="i"
                    :dayIndex="dayIndex"
                    :timeline="timeline"
                    :offset="timeline.offset"
                    :length="timeline.length"
                    :timelines="day.timelines"
                    :changeTrack="changeTrack"
                    :getDay="getDay"
                />
            </div>
        </div>
        <Action
            :trackIndex="trackIndex"
            :getCopyDays="getCopyDays"
            :day="day"
            :dayIndex="dayIndex"
            :handleDeleteTrack="handleDeleteTrack"
        />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { cloneDeep, isEmpty } from "lodash";
import { coordinateToTime, range } from "./util";
import Track from "./Track.vue";
import Action from "./Action.vue";
const props = defineProps({
    day: {
        type: Object,
        required: true,
    },
    dayIndex: {
        type: Number,
        required: true,
    },
    getDay: {
        type: Function,
        required: true,
    },
    // onCheckSingleChange: {
    //     type: Function,
    //     required: true,
    // },
    getCopyDays: {
        type: Function,
        required: true,
    },
});

const coincide = ref(false);
const trackIndex = ref(undefined);
const sliderRef = ref(null);

let offset = ref(0);
let startPosition = ref(0);
let activeTimelineIndex = ref(0);
let time_sliders = ref(cloneDeep(props.day.timelines));

// MouseDown handler
const onMouseDown = (e) => {
    if (e.button !== 0) return;
    e.stopPropagation();
    e.preventDefault();
    const { left } = sliderRef.value.getBoundingClientRect();
    const { pageX: position } = e;
    onStartMove(position, left);
};

const onStartMove = (position, left) => {
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
    offset.value = Math.floor(position - left);
    startPosition.value = position;
    activeTimelineIndex.value = props.day.timelines.length;
    let _coincide = false;
    if (!isEmpty(props.day.timelines)) {
        props.day.timelines.forEach((slider) => {
            if (
                slider.offset < offset.value &&
                slider.offset + slider.length > offset.value
            ) {
                _coincide = true;
            }
        });
    }
    coincide.value = _coincide;
};

const onMouseMove = (e) => {
    e.preventDefault();
    if (coincide.value) return;
    let length = e.pageX - startPosition.value;
    if (offset.value + length >= 720) {
        length = 719.5 - offset.value;
    }
    props.day.timelines.forEach((timeline) => {
        if (
            offset.value < timeline.offset &&
            offset.value + length > timeline.offset
        ) {
            length = timeline.offset - offset.value - 1;
        }
    });
    const { startTime, endTime, startHour, startMin, endHour, endMin } =
        coordinateToTime(offset.value, offset.value + length);
    time_sliders.value[activeTimelineIndex.value] = {
        offset: offset.value,
        length,
        startTime,
        endTime,
        startHour,
        startMin,
        endHour,
        endMin,
    };
    time_sliders.value = props.day.timelines.filter(
        (slider) => slider.length > 0
    );
    props.getDay(time_sliders.value, props.dayIndex);
};

const onMouseUp = (e) => {
    e.preventDefault();
    props.getDay(time_sliders.value, props.dayIndex);
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
};

const changeTrack = (index) => {
    console.log("time_sliders", time_sliders.value);
    time_sliders.value = cloneDeep(props.day.timelines || []);
    time_sliders.value.forEach((slider) => {
        if (slider.border) slider.border = false;
    });
    time_sliders.value[index].border = true;
    props.getDay(time_sliders.value, props.dayIndex);
    trackIndex.value = index;
    console.log("object", index, props.dayIndex, time_sliders.value);
};

const handleDeleteTrack = () => {
    if (isEmpty(props.day.timelines) || trackIndex.value === undefined) return;
    time_sliders.value.splice(trackIndex.value, 1);
    props.getDay(time_sliders.value, props.dayIndex);
    trackIndex.value = undefined;
};

// watch(
//     () => props.day,
//     (val) => {
//         time_sliders.value = cloneDeep(val.timelines || []);
//         console.log("trackIndex.value", props.day, time_sliders.value);
//     },
//     { deep: true }
// );
</script>

<style scoped>
/* Add your styles if necessary */
.day {
    display: flex;
    padding: 0 20px;
    margin: 10px 0;
}
.timeline {
    margin: 0 15px;
}
.time {
    display: flex;
    margin-left: -15px;
    width: 752px;
    margin-right: -15px;
}
.hour {
    width: 30px;
    text-align: center;
    font-size: 12px;
}
.line {
    display: block;
    float: left;
    height: 5px;
    width: 30px;
    border-left: 1px solid #d2d2d2;
    margin-left: 16px;
}
.slider {
    position: relative;
    height: 16px;
    width: 722px;
    /* border-radius: 6px; */
    border: 1px solid #d2d2d2;
    background: #fff;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.slider * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.disabled {
    color: rgba(0, 0, 0, 0.2) !important;
    cursor: no-drop;
    width: 60px;
    height: 100%;
    margin-left: 10px;
}
.copy {
    color: #096dd9 !important;
    width: 60px;
    height: 100%;
    cursor: pointer;
}
.delete {
    color: #f00 !important;
    width: 60px;
    height: 100%;
    margin-left: 10px;
    cursor: pointer;
}
</style>
